<template>
   <div class="sale_main"> 
    <el-card class="box-card">
        <div  class="clearfix">
            <!-- 头部左侧内容 -->
            <el-tabs class="tab" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="销售额" name="sale" lazy>
                    <el-row>
                        <el-col :span="18">
                            <barChartSale></barChartSale>
                        </el-col>
                        <el-col :span="6">
                          <div class="saleRanking">
                               <h3>门店销售额排名</h3>
                                <ul>
                                    <li v-for="(item,index) in chartDataList.orderRank" :key="index">
                                        <span class="first" :class="{hot:item.no <= 3}">{{item.no}}</span>
                                        <span>{{item.name}}</span>
                                        <span class="rivalue">{{item.money}}</span>
                                    </li>
                                   <!--  <li>
                                        <span class="hot first">2</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">7777</span>
                                    </li>
                                    <li>
                                        <span class="hot first">3</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">6767444</span>
                                    </li>
                                    <li>
                                        <span class="first">4</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">666666</span>
                                    </li>
                                    <li>
                                        <span class="first">5</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">33333</span>
                                    </li>
                                    <li>
                                        <span class="first">6</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">4444</span>
                                    </li>
                                    <li>
                                        <span class="first">7</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">32222</span>
                                    </li> -->
                               
                                </ul>       
                         </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="访问量" name="visit" lazy>
                    <el-row>
                        <el-col :span="18">
                            <lineChartVisit></lineChartVisit>
                        </el-col>
                        <el-col :span="6">
                            <div class="saleRanking">
                               <h3>门店访问量排名</h3>
                                <ul>
                                    <li>
                                        <span class="hot first">1</span>
                                        <span>汉堡王</span>
                                        <span class="rivalue">666</span>
                                    </li>
                                    <li>
                                        <span class="hot first">2</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">6666</span>
                                    </li>
                                    <li>
                                        <span class="hot first">3</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">666666</span>
                                    </li>
                                    <li>
                                        <span class="first">4</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">555555</span>
                                    </li>
                                    <li>
                                        <span class="first">5</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">8888</span>
                                    </li>
                                    <li>
                                        <span class="first">6</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">33333</span>
                                    </li>
                                    <li>
                                        <span class="first">7</span>
                                        <span>肯德基</span>
                                        <span class="rivalue">5534343</span>
                                    </li>
                               
                                </ul>       
                         </div>
                        </el-col>
                     </el-row>
                </el-tab-pane>
            </el-tabs>
            <!-- 头部右侧内容 -->
            <div class="right">
               <span @click=" setDay()" style="">今日</span>
               <span @click=" setweek()">本周</span>
               <span @click=" setMonth()">本月</span>
               <span @click=" setYear()">本年</span>
               <el-date-picker 
                    class="date"
                    size="small"
                    v-model="date" type="daterange" 
                    range-separator="-" 
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format = 'yyyy-MM-dd'>
                </el-date-picker>
            </div>
        </div>
    </el-card>
   </div>
</template>

<script>
import {mapState} from 'vuex'

import barChartSale from '@/views/dashboard/Sale/barChartSale'
import lineChartVisit from '@/views/dashboard/Sale/lineChartVisit'
import dayjs from 'dayjs'

export default {
    name:'Sale',
    components:{
        barChartSale,
        lineChartVisit
    },
    data() {
        return {
            //tab切换属性
             activeName:'sale',
             date:[]
        }
    },
    methods:{
        handleClick(tab, event) {
        console.log(tab, event);
      },
    //本天
      setDay(){
        const day = dayjs().format('YYYY-MM-DD')
        this.date = [day,day]
      },
    //本周
      setweek(){
         const state = dayjs().day(1).format('YYYY-MM-DD')
         const end = dayjs().day(7).format('YYYY-MM-DD')
         this.date = [state,end]
      },
    //本月
      setMonth(){
        const state = dayjs().startOf('month').format('YYYY-MM-DD')
         const end = dayjs().endOf('month').format('YYYY-MM-DD')
         this.date = [state,end]
      },
    //本年
    setYear(){
        const state = dayjs().startOf('year').format('YYYY-MM-DD')
         const end = dayjs().endOf('year').format('YYYY-MM-DD')
         this.date = [state,end]
      }
    },
    computed:{
         ...mapState('home',['chartDataList'])
    }

}
</script>

<style scoped>
   
  .box-card {
    width: 100%;
    margin: 10px 0px;
  }
  .clearfix{
      display: flex;
      justify-content: space-between;
      position: relative;
  }
  .tab{
     width: 100%;
  }
  .right{
     position: absolute;
     right: 0px;
  }
  .right span{
     margin: 0px 10px;
     cursor: pointer;
  }
  .right span:hover{
    color: #409EFF;
  }
  .date{
    width: 238px;
    margin: 0px 20px;
  }

  ul{
    list-style: none;
    width: 100%;
    height: 280px;
    padding:0px
  }
  ul li{
     height:10%;
     line-height: 30px;
     margin-bottom: 10px;
  }
  .saleRanking span{
      margin-right: 20px;
      display: inline-block;
  }
  .saleRanking .first{
      width:20px;
      height:20px;
      line-height: 20px;
      text-align: center;
  }
  .rivalue{
     float: right;
  }
  .hot{
      color: white;
      background-color: #a32f2f;
      border-radius: 50%;
  }

  
</style>